<!doctype html>
<html lang="en">
<head>
    <title>Expander Overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <link type="text/css" href="../../themes/wijmo/jquery.wijmo.wijutil.css" rel="stylesheet" />
    <link type="text/css" href="../../themes/wijmo/jquery.wijmo.wijexpander.css" rel="stylesheet" />
    <script type="text/javascript" src="../../wijmo/jquery.wijmo.wijutil.js"></script>
    <script type="text/javascript" src="../../wijmo/jquery.wijmo.wijexpander.js"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#expander").wijexpander();
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div id="expander">
                <h3>
                    Header</h3>
                <div>
                    Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus non magna. Nam ligula elit, pretium et, rutrum non, hendrerit id, ante. Nunc mauris sapien, cursus in.
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                The wijexpaner widget allows you to show or hide embedded or external content with an expanding panel and using several animation effects. The expanding content can be shown or hidden by clicking the expanding panel at run time.
            </p>
            <p>
                The following samples will introduce you to several features of the wijexpander widget, including animation and loading external content.</p>
        </div>
    </div>
</body>
</html>
